import React, { useState } from 'react'
import {
  Form,
  Input,
  Button,
  Dialog,
  Checkbox,
  Space,
  DatePicker,
  CascadePicker,
  Picker,
} from 'antd-mobile'
import dayjs from 'dayjs'
import { RightOutline } from 'antd-mobile-icons'
import Item from 'antd/es/list/Item'
import { useSelector } from 'react-redux'

function Formtest ()  {
  const type = useSelector(state => state.billtype.billtype)
  const [form] = Form.useForm()
  const data = new Date()
  const options = [
    {
      label: '收入',
      value: 'income',
      children: [
        {
          label: '工资',
          value: 'salary',
        }
      ],
    },
    {
      label: '支出',
      value: 'outcome',
      children: [
        {
          label: '娱乐',
          value: 'entertainment',
        },
        {
          label: '食物',
          value: 'food',
        },
      ],
    },
  ]
  const onSubmit = () => {
    const values = form.getFieldsValue()
    console.log(values)
    Dialog.alert({
      content: <pre>{JSON.stringify(values, null, 2)}</pre>,
    })
  }

  return (
    <>
      <Form
        form={form}
        layout='horizontal'
        initialValues={{
          amount: '50.3',
          type:['outcome','food'],
          data: data,
          text:  '这是备注'
        }}
        footer={
          <Button block color='primary' onClick={onSubmit} size='large'>
            确定
          </Button>
        }
      >
        <Form.Header>您要记录以下信息吗</Form.Header>
        <Form.Item name='amount' label='金额'>
          <Input placeholder='请输入' />
        </Form.Item>
        <Form.Item name='type' label='类型' trigger='onConfirm' required  >
          <CascadePicker
            
            options={options}
            onConfirm={(value, items) => {
              console.log('级联选择结果:', items.map(i => i.label).join('/'))
            }}
          >
            {(items, { open }) => (
              <div onClick={open}
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
              >
                {items.length > 0 ? items.map(i => i.label).join('/') : '请选择'}
                <RightOutline 
                  style={{ 
                    fontSize: 20,
                    color: '#ccc',
                  }}
                />
              </div>
            )}
          </CascadePicker>
        </Form.Item>
        
        <DatePickerInputItem />
        <Form.Item name='text' label='备注'>
          <Input placeholder='请输入' />
        </Form.Item>
      </Form>

      
    </>
  )
}

const DatePickerInputItem = () => {
  const [pickerVisible, setPickerVisible] = useState(false)

  return (
    <Form.Item
      noStyle
      shouldUpdate={(prevValues, curValues) =>
        prevValues.birthday !== curValues.birthday
      }
    >
      {() => (
        <Form.Item
          name='data'
          label='时间'
          trigger='onConfirm'
          onClick={() => {
            setPickerVisible(true)
          }}
        >
          <DatePicker
            visible={pickerVisible}
            onClose={() => {
              setPickerVisible(false)
            }}
          >
            {value =>
              value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
            }
          </DatePicker>
        </Form.Item>
      )}
    </Form.Item>
  )
}


export default Formtest